<template></template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import shulin from "./shuling.png";
import yu from "./yu.png";
import model from './model.json'
import { requestAnimationFrame } from "cesium";
export default {
  name: "parent-app",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
     
      // 创建场景对象Scene
      let scene = new THREE.Scene();
      // 显示坐标系
      let axesHelper = new THREE.AxesHelper(200);
      scene.add(axesHelper);
      let group = new THREE.Group();
      // 物体
      let sphereGeometry = new THREE.SphereGeometry(30, 100, 100);
      let meshLambertMaterial1 = new THREE.MeshLambertMaterial({
        color: 0xf3e3a4,
      });
      let mesh1 = new THREE.Mesh(sphereGeometry, meshLambertMaterial1);
      mesh1.name = "球形";

      let boxGeometry = new THREE.BoxGeometry(70, 5, 5);
      let meshLambertMaterial2 = new THREE.MeshLambertMaterial({
        color: 0x5d2c7e,
      });
      let mesh2 = new THREE.Mesh(boxGeometry, meshLambertMaterial2);
      mesh2.name = "Box";
      mesh2.position.x = 100;
      group.add(mesh1, mesh2);

      scene.add(group);

      // 关键帧
      let loader = new THREE.ObjectLoader();
      let mixer = null;
      
      loader.load(model, function (obj){
        console.log('obj',obj);
        obj.uuid = Math.random()
        obj.scale.set(15, 15, 15); //缩放加载的模型
        scene.add(obj);
        // obj作为混合器的参数，可以播放obj包含的帧动画数据
        mixer = new THREE.AnimationMixer(obj);
        // obj.animations[0]：获得剪辑clip对象
        // // 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
        var AnimationAction = mixer.clipAction(obj.animations[0]);
        AnimationAction.play();
      });

      // //播放关键帧
      // let mixer = new THREE.AnimationMixer(group);
      // let AnimationAction = mixer.clipAction(clip);
      // AnimationAction.timeScale = 10; //调节播放速度
      // AnimationAction.play();
      // 点光源
      let pointLight = new THREE.PointLight(0xffffff);
      pointLight.position.set(60, 600, 640);
      scene.add(pointLight);
      // 平行光源
      // let directLight = new THREE.DirectionalLight(0xffffff, 1);
      // directLight.position.set(60, 600, 640);
      // scene.add(directLight);
      // 环境光
      let ambientLight = new THREE.AmbientLight(0x444444);
      scene.add(ambientLight);

      //相机
      let width = window.innerWidth;
      let height = window.innerHeight;
      let k = width / height;
      let s = 300;
      // let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
      // camera.position.set(850, 800, 800);
      /**透视投影相机对象*/
      let camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
      camera.position.set(292, 19, 238);
      camera.lookAt(scene.position);

      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      let clock = new THREE.Clock();
      function render() {
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        requestAnimationFrame(render);
        if (mixer !== null) {
          mixer.update(clock.getDelta());
        }
      }
      render();
      /** --------------------鼠标控件对象--------------------- */
      let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>

